import 'package:flutter/material.dart';
import 'package:flutter_app/resources/pages/deliver_page.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';
import 'package:nylo_framework/nylo_framework.dart';

import '../../bootstrap/helpers.dart';

class Friend extends StatefulWidget {
  Friend({Key? key}) : super(key: key);

  static String state = "friend";

  @override
  _FriendState createState() => _FriendState();
}

class _FriendState extends NyState<Friend> {
  _FriendState() {
    stateName = Friend.state;
  }

  @override
  init() async {
    super.init();
  }

  @override
  stateUpdated(dynamic data) async {
    // e.g. to update this state from another class
    // updateState(Friend.state, data: "example payload");
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          SizedBox(
            height: 10.w,
          ),
          Container(
            child: ClipRRect(
              borderRadius: BorderRadius.circular(10.0),
              child: Image.asset(
                "public/assets/images/banner.png",
                fit: BoxFit.cover,
                height: 230.w,
              ),
            ),
          ),
          SizedBox(
            height: 40.w,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              NumCard(
                num: '898',
                numColor: ThemeColor.get(context).primaryBackgroundDeep,
                label: '男性盲盒',
              ),
              NumCard(
                num: '826',
                numColor: ThemeColor.get(context).buttonBackground,
                label: '女性盲盒',
              ),
            ],
          ),
          SizedBox(
            height: 40.w,
          ),
          Container(
            alignment: Alignment.centerLeft,
            child: Text(
              "随机匹配",
              style: TextStyle(
                  color: ThemeColor.get(context).background, fontSize: 35.sp),
            ),
          ),
          SizedBox(
            height: 30.w,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              ExtractCard(
                title: '抽取盲盒',
                label: '随机抽取一个盲盒',
                backPath: 'public/assets/images/c1.jpg',
                rightWidget: Container(
                  width: 100.w,
                  height: 100.w,
                  decoration: BoxDecoration(
                      color: ThemeColor.get(context)
                          .primaryContent
                          .withOpacity(0.1),
                      borderRadius: BorderRadius.circular(100)),
                  child: Icon(
                    Icons.male,
                    size: 85.sp,
                    color: ThemeColor.get(context).background,
                  ),
                ),
              ),
              ExtractCard(
                title: '抽取盲盒',
                label: '随机抽取一个盲盒',
                backPath: 'public/assets/images/c2.jpg',
                rightWidget: Container(
                  width: 100.w,
                  height: 100.w,
                  decoration: BoxDecoration(
                      color: ThemeColor.get(context)
                          .primaryContent
                          .withOpacity(0.1),
                      borderRadius: BorderRadius.circular(100)),
                  child: Icon(
                    Icons.female,
                    size: 85.sp,
                    color: ThemeColor.get(context).background,
                  ),
                ),
              ),
            ],
          ),
          SizedBox(
            height: 30.w,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              GestureDetector(
                onTap: ()=>Navigator.pushNamed(context, DeliverPage.path ),
                child: Container(
                  width: MediaQuery.of(context).size.width / 2 - 64.w,
                  height: 80.w,
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.centerLeft,
                        end: Alignment.centerRight,
                        colors: [
                          ThemeColor.get(context)
                              .primaryBackgroundDeep
                              .withOpacity(0.5),
                          ThemeColor.get(context)
                              .primaryBackgroundDeep
                              .withOpacity(1),
                        ],
                      ),
                      borderRadius: BorderRadius.circular(50.w)),
                  alignment: Alignment.center,
                  child: Text(
                    "投递盲盒",
                    style: TextStyle(
                        color: ThemeColor.get(context).background,
                        fontSize: 30.sp),
                  ),
                ),
              ),
              Container(
                width: MediaQuery.of(context).size.width / 2 - 64.w,
                height: 80.w,
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight,
                      colors: [
                        ThemeColor.get(context)
                            .buttonBackground
                            .withOpacity(0.5),
                        ThemeColor.get(context).buttonBackground.withOpacity(1),
                      ],
                    ),
                    borderRadius: BorderRadius.circular(50.w)),
                alignment: Alignment.center,
                child: Text(
                  "购买记录",
                  style: TextStyle(
                      color: ThemeColor.get(context).background,
                      fontSize: 30.sp),
                ),
              )
            ],
          ),
          SizedBox(
            height: 40.w,
          ),
          Container(
            alignment: Alignment.centerLeft,
            child: Text(
              "星座匹配",
              style: TextStyle(
                  color: ThemeColor.get(context).background, fontSize: 35.sp),
            ),
          ),
          SizedBox(
            height: 30.w,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              ExtractCard(
                title: '抽取盲盒',
                label: '匹配星座最合的盲盒',
                backPath: 'public/assets/images/c5.jpg',
                rightWidget: Container(
                  width: 80.w,
                  height: 100.w,
                  child: SvgPicture.asset("public/assets/images/male.svg",
                      width: 85.w, height: 85.h),
                ),
              ),
              ExtractCard(
                title: '抽取盲盒',
                label: '匹配星座最合的盲盒',
                backPath: 'public/assets/images/c4.jpg',
                rightWidget: Container(
                  width: 80.w,
                  height: 100.w,
                  child: SvgPicture.asset("public/assets/images/female.svg",
                      width: 85.w, height: 85.h),
                ),
              ),
            ],
          ),
          SizedBox(height: 30.h,),
          Container(
            padding: EdgeInsets.all(10.w),
            decoration: BoxDecoration(
             color: ThemeColor.get(context)
                 .primaryBackgroundDeep
                 .withOpacity(1)
            ),
            child: Text(
              "盲盒脱单是一款新型的帮助年轻人获取更多脱单可能性的软件,你可以按照随机方式、星座匹配等方式来匹配陌生异性，"
                  "你也可以投放纸条到盲盒中供其他的人抽取。",
              style: TextStyle(
                  color: ThemeColor.get(context).background, fontSize: 24.sp),
            ),
          )
        ],
      ),
    );
  }
}

class ExtractCard extends StatelessWidget {
  String title;
  String label;
  String backPath;
  Widget rightWidget;

  ExtractCard(
      {required this.title,
      required this.label,
      required this.backPath,
      required this.rightWidget});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width / 2 - 32.w,
      height: 210.w,
      padding: EdgeInsets.all(10.w),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(15.w),
        image: DecorationImage(
          image: AssetImage(backPath),
          fit: BoxFit.cover,
        ),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                title,
                style: TextStyle(
                    fontSize: 35.sp,
                    fontWeight: FontWeight.bold,
                    color: ThemeColor.get(context).background),
              ),
              SizedBox(
                height: 10.w,
              ),
              Text(
                label,
                style: TextStyle(
                    fontSize: 26.sp, color: ThemeColor.get(context).background),
              ),
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [rightWidget],
          )
        ],
      ),
    );
  }
}

class NumCard extends StatefulWidget {
  String num;
  Color numColor;
  String label;

  NumCard({required this.num, required this.numColor, required this.label});

  @override
  State<NumCard> createState() => _NumCardState();
}

class _NumCardState extends State<NumCard> {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10.w),
          color:
              ThemeColor.get(context).primaryBackgroundDeep.withOpacity(0.1)),
      padding: EdgeInsets.all(10.w),
      width: MediaQuery.of(context).size.width / 2 - 32.w,
      height: 200.w,
      child: Row(
        /* crossAxisAlignment: CrossAxisAlignment.baseline,
                  textBaseline: TextBaseline.alphabetic,*/

        children: [
          // 左边数字
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  widget.num,
                  style: TextStyle(
                      color: widget.numColor,
                      fontSize: 60.sp,
                      fontWeight: FontWeight.bold),
                ),
                Text(
                  widget.label,
                  style: TextStyle(
                      color: ThemeColor.get(context).background,
                      fontSize: 30.sp,
                      fontWeight: FontWeight.bold),
                )
              ],
            ),
          ),
          // 右边剩余字样
          Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Container(
                width: 75.w,
                height: 100.w,
                // alignment: Alignment.bottomRight,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Positioned(
                      // top: 10,
                      right: 0,
                      child: Container(
                        alignment: Alignment.center,
                        width: 45.w,
                        height: 45.w,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(5.w),
                          gradient: LinearGradient(
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                            colors: [
                              ThemeColor.get(context)
                                  .buttonBackground
                                  .withOpacity(0.4),
                              ThemeColor.get(context).buttonBackground,
                            ],
                          ),
                        ),
                        child: Text(
                          "余",
                          style: TextStyle(
                              fontSize: 30.sp,
                              color: ThemeColor.get(context).background),
                        ),
                      ),
                    ),
                    Positioned(
                      bottom: 0,
                      left: 0,
                      child: Container(
                        alignment: Alignment.center,
                        width: 45.w,
                        height: 45.w,
                        decoration: BoxDecoration(
                            gradient: LinearGradient(
                              begin: Alignment.topLeft,
                              end: Alignment.bottomRight,
                              colors: [
                                ThemeColor.get(context).warnLight,
                                ThemeColor.get(context).warnDeep,
                              ],
                            ),
                            borderRadius: BorderRadius.circular(5.w),
                            color: ThemeColor.get(context)
                                .warnLight
                                .withOpacity(1)),
                        child: Text(
                          "剩",
                          style: TextStyle(
                              fontSize: 30.sp,
                              color: ThemeColor.get(context).background),
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}
